<template>
  <div class="">
    <div class="page-operate">
      <div class="page-names">
        <a href="" class="on">首页</a>
        <a href="">资料详情页</a>
        <a href="">下载成功页</a>
        <a href="">个人中心</a>
        <a href="">充值中心</a>
        <a href="">专辑详情页</a>
        <a href="">专题页</a>
      </div>
      <div class="page-tool">
        <el-button class="add" type="text" @click="isAdditionDialog = true"><i class="iconfont iconincrease"></i>增加推广位</el-button>
        <a class="set" @click="showSourceImages"><i class="iconfont iconset"></i>设置</a>
        <a class="leave"><i class="iconfont iconinto"></i>进入页面</a>
      </div>
    </div>
    <!-- 广告位列表展示 -->
    <div class="advertise">
      <advertise-place v-for="ad in advertisement" :key="ad.id"
        :advertiseId="ad.id"
        :advertiseName="ad.advertiseName" 
        :width="ad.width"
        :height="ad.height"
        :images="ad.images"
        :description="ad.description"
        @setAdvertise="setAdvertise"
      />
    </div>
    <!-- 增加广告位弹窗 -->
    <el-dialog title="增加推广位" :visible.sync="isAdditionDialog" width="516px">
      <add-advertise-place @cancelMethod="isAdditionDialog = false" @additionMethod="addAdvertisePlace"/>
    </el-dialog>
    <!-- 广告位图片设置弹窗 -->
    <el-dialog title="图片设置" :visible.sync="isSetAdvertiseDialog" width="780px">
      <set-images :showSourceImagesMethod="showSourceImages" :images="currentSetAdvertise"/>
    </el-dialog>
    <!-- 选择图库图片弹框 -->
    <el-dialog title="图片库" :visible.sync="isSelectImagesDialog" width="853px">
      <select-source-images />
    </el-dialog>
    <!-- <set-advertise-place/> -->
    <!-- <advertise-table /> -->
  </div>
</template>

<script>
import advertisePlace from "@/components/advertise/AdvertisePlace.vue"
import setImages from "@/components/advertise/SetImages.vue"
import selectSourceImages from "@/components/advertise/selectSourceImages.vue"
import addAdvertisePlace from "@/components/advertise/AddAdvertisePlace.vue"
import setAdvertisePlace from "@/components/advertise/SetAdvertisePlace.vue"
export default {
  data(){
    return {
      //广告列表
      advertisement:[
        {
          id:0,
          advertiseName:'大轮播图',
          description:'hahahhahahah',
          width:589,
          height:190,
          images:[
            {
              id:0,
              title:"这是一个大图",
              url:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
              stratTime:"2000, 10, 10, 10, 10",
              endTime:"2000, 10, 10, 10, 10",
              type:"新高考",
              subject:"数学",
              period:"初中"
            },
            {
              id:1,
              title:"哈的法国红酒看来热热天涯博客里让人",
              url:"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
              stratTime:'20200125',
              endTime:"20200409",
              type:"新高考专辑",
              subject:"数学",
              period:"初中"
            },
            {
              id:2,
              title:"欸u你吃饭没，妇女举报每次卡洛费女长袖",
              url:"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
              stratTime:'20200405',
              endTime:"20200501",
              type:"新高考专辑",
              subject:"数学",
              period:"初中"
            }
          ],
        },
        {
          id:1,
          advertiseName:'小图轮播',
          description:'的状况那你说的给u何况他还',
          width:570,
          height:260,
          images:[
            {
              id:0,
              title:"这是一个中图",
              url:"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
              stratTime:'20200102',
              endTime:"20200506",
              type:"新高考",
              subject:"数学",
              period:"初中"
            },
            {
              id:1,
              title:"哈的法国红酒看来热热天涯博客里让人",
              url:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
              stratTime:'20200125',
              endTime:"20200409",
              type:"新高考专辑",
              subject:"数学",
              stage:"初中"
            },
            {
              id:2,
              title:"欸u你吃饭没，妇女举报每次卡洛费女长袖",
              url:"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
              stratTime:'20200405',
              endTime:"20200501",
              type:"新高考专辑",
              subject:"数学",
              stage:"初中"
            }
          ],
        }
      ],
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      //增加广告位弹窗
      isAdditionDialog : false,
      //广告位图片设置弹窗
      isSetAdvertiseDialog : false,
      //选择图库图片弹框
      isSelectImagesDialog : false,
      //当前正在设置的广告位图片
      currentSetAdvertise : []
    }
  },
  methods:{
    //增加广告位
    addAdvertisePlace (id,title,description,width,height) {
      if(!title||!description||!width||!height){
        this.$message({
          showClose: true,
          message: '请填写表格内容',
          type: 'warning'
        });
        return false;
      }
      this.isAdditionDialog = false;
      this.advertisement.push({
        id,
        name:title,
        description,
        width:parseInt(width),
        height:parseInt(height),
        images:[]
      });
    },
    //设置广告位
    setAdvertise (id){
      this.isSetAdvertiseDialog = true;
      this.currentSetAdvertise = this.advertisement[id].images;
    },
    //选择图库图片方法
    showSourceImages(){
      console.log(12);
      this.isSelectImagesDialog = true;
    }
  },
  components:{
    advertisePlace,
    setImages,
    selectSourceImages,
    addAdvertisePlace,
    setAdvertisePlace,
  },
  mounted:function(){
    this.currentSetAdvertise = this.advertisement[0].images;
  }
}
</script>

<style scoped lang="scss">
  .page-operate{
    margin-top:24px;
    position:relative;
  }
  .page-names{
    display:inline-block;
    height:38px;
    padding:6px;
    background:#fff;
    border-radius:4px;
    font-size:0;
    a{
      display:inline-block;
      width:88px;
      border-radius: 4px;
      height:26px;
      font-size:14px;
      text-align:center;
      line-height:26px;
      margin-right:6px;
      &.on,&:hover{
        background: #5468FF;
        color:#fff;
        box-shadow: 0 2px 6px 0 rgba(84,104,255,0.40);
      }
    }
  }
  .page-tool{
    position:absolute;
    top:0;
    right:0;
    height:38px;
    line-height:38px;
    .leave,.set,.add{
      display:inline-block;
      margin:0 20px;
      font-size: 14px;
      color: #5A7180;
      .iconfont{
        display:inline-block;
        font-size:14px;
        margin-right:6px;
      }
      &.on,&:hover{
        color:#5468FF; 
      }
    }
  }
</style>